<%- include('./layouts/header_layouts') %>
<div class="main">
  <%- include('./layouts/navbar_layouts') %>
  <div class="container-fluid">
    <div class="page-title">
      <h1>分类目录</h1>
    </div>
    <!-- 有错误信息时展示 -->
    <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
    <div class="row">
      <div class="col-md-4">
        <form>
          <h2>添加新分类目录</h2>
          <div class="form-group">
            <label for="name">名称</label>
            <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
          </div>
          <div class="form-group">
            <label for="slug">别名</label>
            <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
            <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
          </div>
          <div class="form-group">
            <label for="slug">图标</label>
            <div class="tubiao-container">
              <div class="current">
                <i class="fa fa-glass"></i>
              </div>
              <div class="tubiao-select">
                <i class="fa fa-glass"></i>
                <i class="fa fa-grav"></i>
                <i class="fa fa-user-o"></i>
                <i class="fa fa-arrows-h"></i>
                <i class="fa fa-check"></i>
                <i class="fa fa-fire"></i>
                <i class="fa fa-gift"></i>
              </div>
            </div>
          </div>
          <div class="form-group add-container">
            <input id="btn-add" type="button" class="btn btn-primary" value="添加">
          </div>
          <div class="form-group save-container" hidden>
            <input id="btn-save" type="button" class="btn btn-primary" value="保存">
            <input id="btn-cancel" type="button" class="btn btn-primary" value="取消">
          </div>
        </form>
      </div>
      <div class="col-md-8">
        <div class="page-action">
          <!-- show when multiple checked -->
          <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        </div>
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th class="text-center" width="40"><input type="checkbox"></th>
              <th>名称</th>
              <th>Slug</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog" role="document" style="position:relative;top:100px;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal-msg" class="container-fluid">
          邮箱格式不正确
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>

<%- include('./layouts/aside_layouts') %>
<%- include('./layouts/footer_layouts') %>

<script type="text/template" id="tp">
    {{each $data item}}
      <tr data-id="{{item.id}}">
        <td class="text-center"><input type="checkbox"></td>
        <td>{{item.name}}</td>
        <td>{{item.slug}}</td>
        <td>
            <i class="fa {{item.classname}}"></i>
        </td>
        <td class="text-center">
          <a href="javascript:;" class="edit btn btn-info btn-xs">编辑</a>
          {{if item.isDelete == 0 }}
          <a href="javascript:;" class="del btn btn-danger btn-xs">删除</a>
          {{ else if item.isDelete == 1}}
          <a href="javascript:;" class="reset btn btn-success btn-xs">恢复</a>
          {{/if}}
        </td>
      </tr>
    {{/each}}
  </script>
<script src="/assets/vendors/art-template/template-web.js"></script>
<script src="/assets/js/category.js"></script>